@charset "utf-8";
/* ----------
css
---------- */

/* layout */
body, table, th, td,
textarea, button, input[type="button"] {
	font-family:'微软雅黑', NanumGothic, Dotum, Arial, sans-serif;
	color:#666;
}
/* ===================================
	
 =================================== */
body { background-color:#fff; }
button{cursor:pointer; padding:0; margin:0px;}
input[type="button"]{cursor:pointer;}
#wrap {overflow:hidden; width:100%; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ width:1200px; margin:0px auto; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.font-nanum{font-family:"微软雅黑", NanumGothic, "Nanum Gothic", Dotum, Arial, sans-serif;}
.font-nanumbarun{font-family:微软雅黑,"Nanum Barun Gothic", NanumGothic, "Nanum Gothic", Dotum, Arial, sans-serif;}
table {width:100%;table-layout:fixed;}
.material-icons{vertical-align:middle;}

/* ========
		헤더
 ======== */
#header{position:fixed; top:0px; left:0px; width:100%;  background-color:#000; background-color:rgba(0,0,0,0.7); z-index:999;}
#headerInner{position:relative; width:100%; max-width:1750px; width:100%; margin:0px auto;}
#headerInner .logo{position:absolute; top:0; left:1%; z-index:1; }
#headerInner .logo a{display:block; margin-top:22px; width:314px; height:68px; background:url(../images/logo.png) no-repeat; font-size:0; }
/* 헤더 :: GNB */
#gnb{height:106px; }
#gnb > ul{text-align:right;}
#gnb > ul > li{position:relative; display:inline-block; width:160px; margin-left:-4px; text-align:center; }
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:106px; padding:0 15px;
	-webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms
}
#gnb > ul > li > a:hover,#gnb > ul > li.on > a{background-color:#0060a1;}
#gnb > ul > li > a > span{display:block; height:104px; line-height:104px; letter-spacing:-0.75px; font-size:18px; border-bottom:2px solid transparent; color:#fff;}
#gnb > ul > li > a:hover > span,#gnb > ul > li.on > a > span{border-bottom-color:#fff; color:#fff !important;}
#gnb > ul > li .gnb-2dep{display:none; position:absolute; top:106px; left:0px; width:100%; padding:11px 0 40px;text-align:left; background-color:#0060a1;}
#gnb > ul > li .gnb-2dep li a{display:block; padding:11px 26px; color:#fff; font-size:14px; font-weight:300; letter-spacing:-0.25px;}
/* 헤더 :: Util 메뉴 */
#utilMenu{position:absolute; top:0; right:1%; padding-top:44px; text-align:right;}
#utilMenu a{color:#fff; }
#utilMenu > div{display:inline-block;}
.user-menu-list a{opacity:0.7;filter:Alpha(opacity=70); font-size:13px; font-weight:300}
.user-menu-list a:first-child{margin-right:15px;}
.user-menu-list a:hover{opacity:1.0;filter:Alpha(opacity=100);}
.user-lang-select a{display:inline-block; font-size:18px; font-weight:400; padding-bottom:9px; border-bottom:2px solid transparent; margin-left:20px;}
.user-lang-select a:hover,.user-lang-select a.on{border-bottom-color:#fff; transform:}
/*  헤더 :: GNB MOBILE */ 
.gnb-open-btn{position:absolute; top:50%; right:2%; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%);}
#gnbM{/* width:86%; */ width:300px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#0060a1; z-index:99999; overflow-y:auto;
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
#gnbM.open{right:0px;}
.close-box{cursor:pointer; display:block; height:114px; line-height:114px; padding:0 5%; border-bottom:1px solid #5494c0; text-align:right;}
#gnbNavigation > ul{width:100%; overflow:hidden;}
#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid #5494c0; }
#gnbM.open  #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#gnbNavigation > ul > li > a{position:relative; display:block;  height:48px; line-height:48px; padding:0 7%; color:#fff; font-size:17px; font-weight:400; letter-spacing:-0.25px;}
#gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#1d242a}
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#fff; font-size:14px; padding:12px 7%;}
#gnbNavigation > ul > li .gnb-2dep li a:hover{color:#5494c0}
#gnbMenuBg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.83); z-index:99998}
/* FIXED STYLE */
#header.fixed{background-color:#fff; border-bottom:2px solid #0060a1}
#header.fixed #headerInner .logo a{background-image:url(../images/fixed_logo.png)}
#header.fixed #gnb > ul > li > a > span{color:#2c2c2c}
#header.fixed #utilMenu a{color:#2c2c2c;}
#header.fixed .user-lang-select a:hover,#header.fixed .user-lang-select a.on{border-bottom-color:#0060a1;}
/* ========
		푸터
 ======== */

.familysite-box{position:relative; float:right; width:200px; text-align:left; }
.familysite-box > a{display:block; height:30px; line-height:30px; text-indent:20px; border:1px solid #b0b0b0; background-color:#444546; color:#fff; }
.familysite-box > a i{position:absolute; right:15px;}
.family-list{position:absolute; bottom:30px; left:0px; width:198px;  padding:10px 0; background-color:#444; border:1px solid #b0b0b0; border-bottom:0;  z-index:11; display:none; }
.family-list a{display:block; padding:10px 20px; color:#fff; }
.family-list a:hover{color:#00a19e}
.bottom-to-top-btn{position:absolute; right:6%; top:-60px; display:block; width:60px; height:40px; text-align:center; padding-top:20px;background-color:rgba(169,169,169,0.8);}
.index .bottom-to-top-btn{display:none;}
/* ========
	사이트맵
 ======== */
#sitemapCon{ position:relative; width:96%; padding:15px 0; max-width:1200px; margin:0px auto; z-index:99999; }
#sitemapInner{overflow:hidden; }
#sideTitCon{position:absolute; top:0px; left:0px; height:100%; background-color:#0060a1; width:175px; background:url(../images/site_map_tit.png) no-repeat; font-size:0; line-height:100%; overflow:hidden;}
#sitemapList{width:99%; height:571px;background-color:#fff; box-shadow:5px 5px 5px rgba(0, 0, 0, .1);}
#sitemapList > ul{overflow:hidden; margin:0 40px 0 175px; padding-top:120px;}
#sitemapList > ul > li{float:left; width:20%; text-align:center;}
#sitemapList > ul > li > a{display:inline-block; color:#191919; padding:0 15% 30px 15%;font-size:30px; border-bottom:1px solid #404040; color:#191919; font-size:20px; letter-spacing:-1.0px; margin-bottom:40px;}
#sitemapList > ul > li > a:hover{color:#0060a1}
#sitemapList > ul > li .sitemap-2dep {text-align:left; padding-left:30%;}
#sitemapList > ul > li .sitemap-2dep a{display:block; padding:13px 0; color:#3d3d3d; font-size:15px; font-weight:300;}
#sitemapList > ul > li .sitemap-2dep a:hover{color:#0060a1; text-decoration:underline;}
/* -------- MODAL LAYER -------- */
.modal-pop-bg{position:fixed; width:100%; height:100%; top:0px; left:0px;  background:#000; background:rgba(0,0,0,0.8); display:none; ; z-index:9999}
.modal-fixed-pop-wrapper{position:fixed; display:none; top:0px; left:0px; width:100%; height:100%; z-index:9999;}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-close-box{width:100%; max-width:1200px; margin:0px auto; text-align:right;}
.modal-close-btn{display:none; margin:0 0 14px 0;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.5);
  border-radius: 50%;
  border-top-color: #0060a1;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* ========
	서브레이아웃
 ======== */
#visual{overflow:hidden; position:relative; display:table; width:100%; height:385px;}
#visual > div{/* position:relative; */ display:table-cell; vertical-align:middle; text-align:center; color:#fff;}
#visual > div .visual-tit{display:inline-block; font-size:40px; letter-spacing:-0.75px; font-weight:400; padding:55px 0 26px; position:relative; z-index:1;}
#visual > div .visual-txt{font-size:13px; opacity:0.73;filter:Alpha(opacity=73); font-weight:300; position:relative; z-index:1;}
#visual > div .visual-txt a{color:#fff;}
#visual > div .visual-txt a:hover{color:#034da2;}
#visual > div .visual-btns{position:absolute; top:50%; left:50%;width:630px; height:14px; margin-left:-315px;  }
#visual > div .visual-btns a{display:block; position:absolute; top:0px;}
#visual > div .visual-btns .prev-page-btn{left:0px;}
#visual > div .visual-btns .next-page-btn{right:0px;}
#visualBottomCon{position:absolute; bottom:0px; left:0px; width:100%; background-color:rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.3)}
#visualBottomCon .left-controls{float:left; margin-left:6%; }
#visualBottomCon .right-controls{float:right; margin-right:6%; height:100%;}
#visualBottomCon a{display:inline-block; width:160px; text-align:center; line-height:42px; color:#fff; height:42px; margin-right:2px; background-color:#6b5d54; font-size:16px; letter-spacing:-0.25px;}
#visualBottomCon a.sub-visual-btn2{background-color:#969696;}
#visualBottomCon a.sub-visual-btn3{background-color:#0060a1;}
#visualBottomCon a.sub-visual-btn4{background-color:#00a19e;}
/* Sub Layout :: Location */
#contentLocation{position:relative; width:100%; height:50px; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; background-color:#dadada; }
.location-inner{ left:50%; height:100%; width:auto; background-color:#f0f0f0;margin-left:273px;}
.location-inner > ul{ height:100%;}
.location-inner > ul > li{position:relative; float:left; width:210px; height:100%; letter-spacing:-0.25px; color:#373737; line-height:50px; background:url(../images/location_bg2.jpg) no-repeat 100% 0; padding-right:20px;}
.location-inner > ul > li.home{width:auto; font-size:13px; font-weight:300; background:#dadada url(../images/location_bg1.jpg) no-repeat 100% 0; padding-right:40px; }
.location-inner > ul > li.home img{margin-right:15px; vertical-align: middle;}
.location-inner > ul > li > a{display:block; padding-left:23px; font-size:15.5px; background:url(../images/location_arrow.jpg) no-repeat 95% 50%}
.location-inner > ul > li .location-2dep{display:none; position:absolute; top:50px; left:-18px;width:228px; border:1px solid #cfcfcf; border-bottom-color:#000000; background-color:#fff; z-index:11}
.location-inner > ul > li.location1 .location-2dep{width:229px;}
.location-inner > ul > li .location-2dep li{height:44px; line-height:44px; border-top:1px solid #cfcfcf;}
.location-inner > ul > li .location-2dep li:first-child{border-top:0;}
.location-inner > ul > li .location-2dep li a{display:block; padding-left:40px; color:#414141; font-size:15px; font-weight:300; letter-spacing:-0.75px;}
.location-inner > ul > li .location-2dep li a:hover{background:#f0f0f0 url(../images/location_arrow2.jpg) no-repeat 95% 50%}
#middleArea{padding:70px 0;display: table;}
#contentInfo{position:relative; border-bottom:1px solid #d6d6d6; text-align:center;}
#contentInfo h3{display:inline-block; position:relative; top:1px;  padding:0 35px 25px 35px; border-bottom:2px solid #00c5db; color:#151515; font-size:32px; font-weight:400; letter-spacing:-0.75px;}
#contentInfo a{display:inline-block; position:absolute; top:0px; padding:15px 0px 42px 0; border-bottom:1px solid #151515; }
#contentInfo .sub-prev-btn{ padding-right:5px;  left:0px;}
#contentInfo .sub-next-btn{ padding-left:5px; right:0px;}
#content{padding-top:60px; min-height:400px;}
#content img{max-width:100%;vertical-align: middle;}

@media all and (max-width:1400px){
	/* -------- 헤더 -------- */
	#headerInner .logo a{width:200px; background-size:100%; margin-top:35px;}
	#utilMenu > div{display:block;}
	#utilMenu > div.user-menu-list{position:absolute; top:5px; right:0px; width:150px;}
	#utilMenu > div.user-menu-list a{font-size:11px;}
}
@media all and (max-width:1220px){
	.area{width:100%;}
	/* -------- 헤더 -------- */
	#headerInner{padding:60px 0 0 0;}
	#headerInner .logo{position:static; margin-left:2%;}
	#headerInner .logo a{margin:0;}
	#utilMenu{top:0px; right:auto; overflow:hidden; width:96%; height:30px; left:0px; background-color:#000; padding:10px 2%;}
	#utilMenu > div.user-menu-list{float:left; position:static; width:auto;}
	#utilMenu > div.user-menu-list a{font-size:18px; line-height:30px; }
	#utilMenu > div.user-menu-list a:first-child{display:none;}
	#utilMenu > div.user-lang-select{float:right;}
	#gnb{display:none;}
	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0);}
	.gnb-open-btn i{font-size:48px; color:#fff; background:url(../images/menu.png) no-repeat;width: 64px;height: 64px;display: table;}
	/* FIXED STYLE */
	#header.fixed{top:-50px;}
	#header.fixed .gnb-open-btn i{color:#2c2c2c; background:url(../images/menu_on.png) no-repeat;}
	/* -------- 푸터 -------- */
	.familysite-box{float:none; margin:0px auto;}
	#footerInner .foot-logo{display:none;}
	#footerInner .footer-address,#footerInner .footer-address dl{float:none; width:96%; margin:0 auto; text-align:center; font-size:11px; line-height:18px;}
	#footerInner .footer-address{margin:20px auto;}
	#footerInner .footer-address dd{margin-right:0;}
	#footerInner address{margin-top:15px;}
	.bottom-to-top-btn{position:static; margin:0px auto;}
	.index .bottom-to-top-btn{display:block;}
	/* -------- 사이트맵 -------- */
	/* MODAL LAYER */
	.modal-close-box{width:96%; }
	.modal-close-btn{margin:0; margin-top:2%;}
	.modal-close-btn img{width:32px;}
	.modal-inner-content{padding:2% 0;}
	/* -------- SUB 레이아웃 -------- */
	#visualBottomCon{bottom:-60px; opacity:0;filter:Alpha(opacity=0);}
	#contentInfo{width:96%; margin:0px auto;}
}

@media all and (max-width:768px){
	/* -------- 사이트맵 -------- */
	#sideTitCon{
		position:static; width:90%; height:auto; padding:10px 5%; background:none; background-color:#0060a1; font-size:24px; line-height:20px;
	}
	.side-tit-con strong{display:block; font-size:20px; font-weight:600; letter-spacing:-0.8px; color:#fff; opacity:0.6;filter:Alpha(opacity=60);}
	.side-tit-con span{color:#fff; font-size:12px; letter-spacing:-0.5px; font-weight:300;}
	#sitemapList{width:100%; height:auto ; box-shadow:none;}
	#sitemapList > ul{margin:0; padding:20px 5%;}
	#sitemapList > ul > li{width:33.33%;}
	#sitemapList > ul > li > a{font-size:20px; margin-bottom:20px;}
	#sitemapList > ul > li .sitemap-2dep {height:150px; padding-left:5%;}
	#sitemapList > ul > li .sitemap-2dep a{padding:5px 2%; font-size:12px; }

	/* -------- SUB 레이아웃 -------- */
	#visual{height:325px}
	#visual > div .visual-tit{padding-top:95px; font-size:32px}
	#visual > div .visual-btns{left:2%; top:55%; margin-left:0; width:96%;}
	#middleArea{padding:30px 0;}
	#contentInfo{width:96%; margin:0px auto;}
	#contentInfo h3{font-size:24px; padding:0 3% 15px 3%;}
	#contentInfo a{padding-bottom:20px;}
	.location-inner{position:static; margin-left:0; float:left; width:100%; }
}
	
@media all and (max-width:640px){
	/* -------- 헤더 -------- */
	#headerInner{padding:52px 0 10px 0}
	#headerInner .logo a{width:170px; height:36px}
	#utilMenu{height:22px;}
	#utilMenu > div a{font-size:12px !important;}
	#utilMenu > div.user-menu-list a{line-height:22px}
	.user-lang-select a{border-bottom-width:1px}
	.gnb-open-btn i{font-size:38px}
	/* FIXED STYLE */
	#header.fixed{top:-42px;}
	/* -------- SUB 레이아웃 -------- */
	#visual{height:260px}
	#visual > div .visual-tit{padding-top:108px}
	#visual > div .visual-txt{display:none}
	#visual > div .visual-btns{top:60%;}
	#visual > div .visual-btns img{height:8px;}
	/* Sub Layout :: Location */
	#contentLocation{height:34px;}
	.location-inner{position:static; margin-left:0; float:left; width:100%; }
	.location-inner > ul{position:relative;}
	.location-inner > ul > li{position:static;width:36%; float:left; padding:0 2% !important; line-height:34px; background-size:contain !important;}
	.location-inner > ul > li.home{width:12%; font-size:0; text-align:center;}
	.location-inner > ul > li.home a{ padding-left:0px; height: 34px; overflow: hidden;background-image: none;}
	.location-inner > ul > li > a{font-size:12px;}
	.location-inner > ul > li.location2 {width:45%;}
	.location-inner > ul > li.location2 a{padding-left:0px;}
	.location-inner > ul > li .location-2dep{top:34px; left:0px; width:100% !important;}
	.location-inner > ul > li .location-2dep li{height:34px; line-height:34px;}
	.location-inner > ul > li .location-2dep li a{font-size:13px; padding:0 5%;}
	
	
}







/* ===================================
	애니메이션효과
 =================================== */
@-webkit-keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes inFromLeft {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}